<!--
 * @Author: 胡俊/treence
 * @Date: 2022-05-24 09:45:03
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 16:02:24
 * @Description: 
 * @Email: treence@gmail.com
 * @Company: 3xData
 * @youWant: 我的=》设备信息
-->
<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <!-- 顶部搜索 -->
    <view class="header">
      <!-- 搜索条 -->
      <view class="search">

        <!-- 类型选择 -->
        <view class="select_type">
          <picker mode="selector"
                  class="selector"
                  :range="typeRange"
                  range-key="label"
                  @change="selector_type($event)">

            <view>{{ searchObject.type }}
              <view class="cuIcon-unfold" />
            </view>
          </picker>

          <view class="btn_childType cuIcon-searchlist"
                @click="foldStatus = true" />
        </view>

      </view>
    </view>

    <!-- //! 小类别选择 折叠抽屉 -->
    <view class="pane_childType"
          :class="foldStatus ? 'unfold' : 'fold'">
      <!-- 遮罩层 -->
      <view class="layer_mask"
            @click="foldStatus = false" />

      <view class="card_childType">

        <!-- 类型选择 -->
        <view class="select_type">
          <picker mode="selector"
                  class="selector"
                  :range="typeRange"
                  range-key="label"
                  @change="selector_type($event)">

            <view>{{ searchObject.type }}
              <view class="cuIcon-unfold" />
            </view>
          </picker>
        </view>
        <!-- <view class="title">请选择设备类型</view> -->

        <!-- 子类别类型 -->
        <view class="scrollPane">
          <view class="bar_childType"
                v-for="i in typeList"
                :key="i"
                @click="toPage(i)">
            {{i.name}}
            <view class="count">数量：{{i.count}}</view>
          </view>
        </view>

      </view>
    </view>

    <!-- 内容展示区域 -->
    <view class="main"
          v-for="(item, index) in typeList"
          :key="index">

      <!-- // todo 根据 实配 === 应配 来决定左侧标记 显示红蓝 -->
      <view :class="item.count >= item.number ? 'card_equimpent enough' : 'card_equimpent scarce'"
            @click="toPage(item)">
        <view class="title">{{item.name}}</view>

        <!-- 数量展示 -->
        <view class="count">
          <view>
            <view class="number">{{item.number}}</view>
            <view>应配数量</view>
          </view>

          <view>
            <view class="number">{{item.count}}</view>
            <view>实配数量</view>
          </view>
        </view>

      </view>

    </view>
  </view>
</template>
<script>
export default {
  data () {
    return {
      // 导航栏参数
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "设备配备详情信息"
        }
      },
      searchObject: {
        type: '消防技术服务基础设备'
      },
      typeRange: [
        { label: '消防技术服务基础设备', value: '消防技术服务基础设备' },
        { label: '消防设施维护保养检测设备配备', value: '消防设施维护保养检测设备配备' },
        { label: '消防安全评估设备配备', value: '消防安全评估设备配备' },
      ],
      foldStatus: false,// 子分类是否展开, true为展开
      deviceNameList: [], // 消防技术服务基础设备
      maintenanceDeviceNameList: [], // 消防设施维护保养检测设备配备
      safeDeviceNameList: [], // 消防安全评估设备配备
      typeList: [], // 类型列表
      loading: false,
    }
  },
  onShow () {
    this.getForm()
  },
  watch: {
    'searchObject.type': {
      // 监听options，为标签初始化
      handler (val) {
        // 字段联动
        if (val === '消防技术服务基础设备') {
          this.typeList = this.deviceNameList
        }
        if (val === '消防设施维护保养检测设备配备') {
          this.typeList = this.maintenanceDeviceNameList
        }
        if (val === '消防安全评估设备配备') {
          this.typeList = this.safeDeviceNameList
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 跳转至详情页面
    toPage (item) {
      this.deviceNameList = []
      this.maintenanceDeviceNameList = []
      this.safeDeviceNameList = []
      uni.navigateTo({
        url: './equipmentForm?deviceClassification=' + item.id + '&count=' + item.count + '&number=' + item.number + '&name=' + item.name + '&title=' + this.searchObject.type
      })
    },
    // 获取表单信息
    getForm () {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      this.$store.dispatch('organizeInfo_form', '')
        .then(res => {
          if (res && res.code === 200) {
            // 获取设备列表
            if (res.data.dictDeviceTypes) {
              res.data.dictDeviceTypes.forEach(element => {
                if (element.dictCode == "1") {
                  this.deviceNameList.push(element)
                } else if (element.dictCode == "2") {
                  this.maintenanceDeviceNameList.push(element)
                } else if (element.dictCode == "3") {
                  this.safeDeviceNameList.push(element)
                }
              });
              if (this.searchObject.type === '消防技术服务基础设备') {
                this.typeList = this.deviceNameList
              }
              if (this.searchObject.type === '消防设施维护保养检测设备配备') {
                this.typeList = this.maintenanceDeviceNameList
              }
              if (this.searchObject.type === '消防安全评估设备配备') {
                this.typeList = this.safeDeviceNameList
              }
            }
          }
        })
        .finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
    },
    // 机构类别选择
    selector_type (e) {
      this.searchObject.type = this.typeRange[e.detail.value].value
    }
  }

}
</script>
<style lang="scss" scoped>
@import "./styles/equipment.scss";
</style>